import React, { useState,useEffect } from 'react';
import { Button, Drawer, Space, Form, Input, Select, InputNumber, Radio,message } from 'antd';
import styles from './index.module.scss'
import { useTranslation } from 'react-i18next';
import { messageAdd } from '@/service'


export default (props) => {
  const { t } = useTranslation();
  const { visible, onClose } = props;
  const [messageApi, contextHolder] = message.useMessage();
  const [loading, setLoading] = useState(false); // 添加 loading 状态
  const [form] = Form.useForm(); // 创建表单实例
  const handleClose = () => {
    onClose();
    form.resetFields();
  };
  const handleSubmit = async () => {
    try {
      await form.validateFields().then(async (values) => {
        setLoading(true);
        const { title, content } = values;
        let params = {
          title,
          content
        }
        messageAdd(params).then(res => {
          setLoading(false);
          if (res.code === 0) {
            messageApi.success({
              type: 'success',
              content: res?.message,
            });
            handleClose();
          } else {
            messageApi.open({
              type: 'error',
              content: res?.message,
            });
          }
        })
      })

    } catch (error) {
      // messageApi.open({
      //   type: 'error',
      //   content: error?.msg,
      // });
      // setLoading(false);
    }
  };
  return (
    <>
      <Drawer className={styles.drawerPop} maskClosable={false} title={t('menu.notiveALl.from.title')} onClose={handleClose} open={visible} width={440} extra={
        <Space>
          <Button onClick={handleClose}>{t('common.modal.button.cancel')}</Button>
          <Button type="primary" onClick={handleSubmit} loading={loading}>
          {t('common.modal.button.submit')}
          </Button>
        </Space>
      }>
        <div className={styles.fromContent}>
          <Form
            name="system"
            form={form}
            className='custom-form-primary'
            labelCol={{ span: 9 }}
            wrapperCol={{ span: 14 }}
          >
            <Form.Item
              label={t('menu.notiveALl.form.lable.title')}
              name="title"
              rules={[
                {
                  required: true,
                  message: t('menu.notiveALl.form.rule.title')
                },
              ]}
            >
              <Input type="text" placeholder={t('common.modal.placehoderworkstation')} />
            </Form.Item>

            <Form.Item
              label={t('menu.notiveALl.form.lable.content')}
              name="content"
              rules={[
                {
                  required: true,
                  message:t('menu.notiveALl.form.rule.content')
                },
              ]}
            >
             <Input.TextArea  style={{ resize: 'none', lineHeight: 'normal',height:'200px' }} rows={10} placeholder={t('common.modal.placehoderworkstation')} maxLength={400} />
            </Form.Item>
          </Form>
        </div>
      </Drawer>
      {contextHolder}
    </>
  );
};
